<template>
    <view class="contion">
        <view class="header_box" :class="type == 1 ? 'header_box' : 'header_box1'">
            <view class="title_box">龙虎榜
            </view>
            <view class="goBack_box" @click="goBack"></view>
            <view class="guize_box" @click="guize">规则</view>
            <view class="shuoming1_box">活动时间：{{ obj.start_time }}-{{ obj.end_time }}</view>
            <view class="shuoming2_box">{{ obj.remark }}</view>
            <view class="anniu_box">
                <view :class="type == 1 ? 'wjbang_box' : 'wjbang_box1'" @click="wjBtn">玩家榜</view>
                <view :class="type == 2 ? 'lhbang_box' : 'lhbang_box1'" @click="zdBtn">战队榜</view>
            </view>
        </view>
        <view class="bang_box">
            <view class="tab_title_box">
                <view class="txt_box" v-if="type == 1">玩家榜</view>
                <view class="txt_box" v-if="type == 2">战队榜</view>
            </view>
            <view class="tab_con_box">
                <view class="tab_th_box">排名</view>
                <view class="tab_th_box" v-if="type == 1">用户</view>
                <view class="tab_th_box" v-if="type == 2">战队</view>
                <view class="tab_th_box">积分</view>
                <view class="tab_th_box">奖励</view>
            </view>
            <scroll-view scroll-y class="neirong_big_box">
                <view class="neirong_box" v-for="(item, index) in rankList" :key="index">
                    <view class="tab_paiming_box">NO.{{ item.rank || '' }}</view>
                    <view class="tab_yh_box">{{ item.name }}</view>
                    <view class="tab_jf_box">{{ item.point }}</view>
                    <view class="tab_jl_box">
                        <view class="pic_box" v-if="(type == 1 && item.rank <= 5) || type == 2" @click="xiangqing(item)">
                            <image :src="item.reward == null ? '' : item.reward.image" mode="scaleToFill" />
                        </view>
                        <view class="kongSty" v-else>—</view>
                    </view>
                </view>
            </scroll-view>
            <view class="open_box" @click="goIndex">开取盲盒，获得积分！</view>
        </view>
        <u-popup mode="center" v-model="xiangqingTc" border-radius="20">
            <view class="xq_box">
                <view class="title_box">第{{ Detailsreward || '' }}名奖励</view>
                <view class="pic_box">
                    <image :src="xqObj.image" mode="scaleToFill" />
                </view>
                <view class="tc_name_box" v-if="type == 1">{{ xqObj.name || '' }}</view>
                <view class="tc_pic_box" v-if="type == 1">市场参考价：￥{{ xqObj.price || '' }}</view>
            </view>
        </u-popup>
    </view>
</template>
<script>
export default {
    data() {
        return {
            type: 1,//1:玩家榜 2：战队帮
            obj: {},//对象
            rankList: [],//榜列表
            xiangqingTc: false,//详情弹窗
            xqObj: {//详情对象
                name: '',
                price: '',
            },
            Detailsreward: '',//详情奖励排名
            mingci: '',//多少名
        }
    },
    onShow() {
        this.getInfo()
        this.getList()
    },
    methods: {
        xiangqing(item) {
            this.mingci = item.rank
            //console.log(item)
            this.xqObj = item.reward
            switch (item.rank) {
                case 1:
                    this.Detailsreward = "一"
                    break;
                case 2:
                    this.Detailsreward = "二"
                    break;
                case 3:
                    this.Detailsreward = "三"
                    break;
                case 4:
                    this.Detailsreward = "四"
                    break;
                case 5:
                    this.Detailsreward = "五"
                    break;
                case 6:
                    this.Detailsreward = "六"
                    break;
                case 7:
                    this.Detailsreward = "七"
                    break;
                case 8:
                    this.Detailsreward = "八"
                    break;
                case 9:
                    this.Detailsreward = "九"
                    break;
                case 10:
                    this.Detailsreward = "十"
                    break;
                case 11:
                    this.Detailsreward = "十一"
                    break;
                case 12:
                    this.Detailsreward = "十二"
                    break;
                case 13:
                    this.Detailsreward = "十三"
                    break;
                case 14:
                    this.Detailsreward = "十四"
                    break;
                case 15:
                    this.Detailsreward = "十五"
                    break;
                case 16:
                    this.Detailsreward = "十六"
                    break;
                case 17:
                    this.Detailsreward = "十七"
                    break;
                case 18:
                    this.Detailsreward = "十八"
                    break;
                case 19:
                    this.Detailsreward = "十九"
                    break;
                case 20:
                    this.Detailsreward = "二十"
                    break;
                default:
                    this.Detailsreward = ""

            }
            //console.log(this.Detailsreward)
            this.xiangqingTc = true
        },
        // 去首页
        goIndex() {
            uni.switchTab({
                url: '/pages/index/redouble'
            })
        },
        // 规则
        guize() {
            uni.navigateTo({
                url: '/userPage/user/agreement?id=' + 111
            });
        },
        // 页面对象
        getInfo() {
            this.$Request.get(this.$api.user.activity).then(res => {
                this.obj = res.data
            })
        },
        getList() {
            this.rankList = []
            let data = {
                type: this.type
            }
            this.$Request.get(this.$api.user.rank, data).then(res => {
                this.rankList = res.data.list
                console.log(res.data.list)
            })
        },
        // 玩家榜单
        wjBtn() {
            this.type = 1
            this.getList()
        },
        // 战队榜
        zdBtn() {
            this.type = 2
            this.getList()
        },
        // 返回
        goBack() {
            uni.navigateBack()
        }
    }
}
</script>
<style lang="scss" scoped>
.contion {
    width: 100vw;
    height: 100vh;
    position: relative;
    background-image: url('https://mh.qingfentool.vip/upload/image/20230526/621d01b64be0961d409300e3f46d5521.png');
    background-size: 100% 100%;

    .header_box {
        width: 100%;
        height: 630rpx;
        margin: auto;
        position: relative;
        background-image: url('https://mh.qingfentool.vip/upload/image/20230526/65d9b57400ef8b503183a108473ceea2.png');
        background-size: 100% 100%;
        margin-bottom: 30rpx;

        .title_box {
            width: 100%;
            height: 50rpx;
            text-align: center;
            position: absolute;
            top: 90rpx;
            font-size: 32rpx;
            font-family: Source Han Sans CN-Medium, Source Han Sans CN;
            font-weight: 500;
            color: #FFFFFF;
            line-height: 50rpx;
        }

        .goBack_box {
            width: 20rpx;
            height: 30rpx;
            background-image: url('https://mh.qingfentool.vip/upload/image/20230526/dd6523b0eaf3e1b52f0875840e93b5ae.png');
            background-size: 100% 100%;
            opacity: 1;
            position: absolute;
            top: 103rpx;
            left: 20rpx;
        }

        .guize_box {
            width: 150rpx;
            height: 60rpx;
            position: absolute;
            right: 0;
            bottom: 150rpx;
            background-image: url('https://mh.qingfentool.vip/upload/image/20230526/986a2d1f26a528b5a23adcce72e193af.png');
            background-size: 100% 100%;
            text-align: center;
            line-height: 60rpx;
            font-size: 30rpx;
            font-family: Source Han Sans CN-Medium, Source Han Sans CN;
            font-weight: 500;
            color: #A26B2F;
        }

        .shuoming1_box {
            width: 100%;
            height: 28rpx;
            font-size: 20rpx;
            font-family: Source Han Sans CN-Bold, Source Han Sans CN;
            font-weight: 700;
            color: #FFFFFF;
            line-height: 28rpx;
            text-align: center;
            position: absolute;
            bottom: 120rpx;
        }

        .shuoming2_box {
            width: 100%;
            height: 28rpx;
            font-size: 20rpx;
            font-family: Source Han Sans CN-Bold, Source Han Sans CN;
            font-weight: 700;
            color: #FFFFFF;
            line-height: 28rpx;
            text-align: center;
            position: absolute;
            bottom: 90rpx;
        }

        .anniu_box {
            width: 100%;
            height: 60rpx;
            position: absolute;
            bottom: 0;
            display: flex;
            justify-content: space-around;
            align-items: center;

            .wjbang_box,
            .lhbang_box {
                width: 176rpx;
                height: 54rpx;
                background: rgba(0, 0, 0, 0.1);
                box-shadow: inset 0rpx 0rpx 20rpx 0rpx rgba(255, 159, 0, 0.4);
                border-radius: 60rpx 60rpx 60rpx 60rpx;
                border: 1rpx solid #FF9F00;
                font-size: 32rpx;
                font-family: Source Han Sans CN-Medium, Source Han Sans CN;
                font-weight: 500;
                color: #FFFFFF;
                text-align: center;
                line-height: 54rpx;
            }

            .wjbang_box1,
            .lhbang_box1 {
                width: 176rpx;
                height: 54rpx;
                font-size: 32rpx;
                font-family: Source Han Sans CN-Medium, Source Han Sans CN;
                font-weight: 500;
                color: #FFFFFF;
                text-align: center;
                line-height: 54rpx;
            }
        }
    }

    .header_box1 {
        width: 100%;
        height: 630rpx;
        margin: auto;
        position: relative;
        background-image: url('https://mh.qingfentool.vip/upload/image/20230527/2efcecf566d1c754668a4ee86c060e02.png');
        background-size: 100% 100%;
        margin-bottom: 30rpx;

        .title_box {
            width: 100%;
            height: 50rpx;
            text-align: center;
            position: absolute;
            top: 90rpx;
            font-size: 32rpx;
            font-family: Source Han Sans CN-Medium, Source Han Sans CN;
            font-weight: 500;
            color: #FFFFFF;
            line-height: 50rpx;
        }

        .goBack_box {
            width: 20rpx;
            height: 30rpx;
            background-image: url('https://mh.qingfentool.vip/upload/image/20230526/dd6523b0eaf3e1b52f0875840e93b5ae.png');
            background-size: 100% 100%;
            opacity: 1;
            position: absolute;
            top: 103rpx;
            left: 20rpx;
        }

        .guize_box {
            width: 150rpx;
            height: 60rpx;
            position: absolute;
            right: 0;
            bottom: 150rpx;
            background-image: url('https://mh.qingfentool.vip/upload/image/20230526/986a2d1f26a528b5a23adcce72e193af.png');
            background-size: 100% 100%;
            text-align: center;
            line-height: 60rpx;
            font-size: 30rpx;
            font-family: Source Han Sans CN-Medium, Source Han Sans CN;
            font-weight: 500;
            color: #A26B2F;
        }

        .shuoming1_box {
            width: 100%;
            height: 28rpx;
            font-size: 20rpx;
            font-family: Source Han Sans CN-Bold, Source Han Sans CN;
            font-weight: 700;
            color: #FFFFFF;
            line-height: 28rpx;
            text-align: center;
            position: absolute;
            bottom: 120rpx;
        }

        .shuoming2_box {
            width: 100%;
            height: 28rpx;
            font-size: 20rpx;
            font-family: Source Han Sans CN-Bold, Source Han Sans CN;
            font-weight: 700;
            color: #FFFFFF;
            line-height: 28rpx;
            text-align: center;
            position: absolute;
            bottom: 90rpx;
        }

        .anniu_box {
            width: 100%;
            height: 60rpx;
            position: absolute;
            bottom: 0;
            display: flex;
            justify-content: space-around;
            align-items: center;

            .wjbang_box,
            .lhbang_box {
                width: 176rpx;
                height: 54rpx;
                background: rgba(0, 0, 0, 0.1);
                box-shadow: inset 0rpx 0rpx 20rpx 0rpx rgba(255, 159, 0, 0.4);
                border-radius: 60rpx 60rpx 60rpx 60rpx;
                border: 1rpx solid #FF9F00;
                font-size: 32rpx;
                font-family: Source Han Sans CN-Medium, Source Han Sans CN;
                font-weight: 500;
                color: #FFFFFF;
                text-align: center;
                line-height: 54rpx;
            }

            .wjbang_box1,
            .lhbang_box1 {
                width: 176rpx;
                height: 54rpx;
                font-size: 32rpx;
                font-family: Source Han Sans CN-Medium, Source Han Sans CN;
                font-weight: 500;
                color: #FFFFFF;
                text-align: center;
                line-height: 54rpx;
            }
        }
    }

    .bang_box {
        width: 710rpx;
        height: 840rpx;
        background: #F9D38A;
        box-shadow: inset 0rpx 0rpx 40rpx 0rpx rgba(255, 255, 255, 0.6);
        border-radius: 20rpx 20rpx 20rpx 20rpx;
        opacity: 1;
        margin: auto;
        position: relative;

        .tab_title_box {
            width: 100%;
            height: 114rpx;
            display: flex;
            justify-content: center;
            align-items: center;

            .txt_box {
                width: 210rpx;
                height: 58rpx;
                background: #DA9300;
                border-radius: 54rpx 54rpx 54rpx 54rpx;
                opacity: 1;
                text-align: center;
                line-height: 58rpx;
                font-size: 30rpx;
                font-family: Source Han Sans CN-Medium, Source Han Sans CN;
                font-weight: 500;
                color: #FFFFFF;
            }
        }

        .tab_con_box {
            width: 100%;
            height: 74rpx;
            background: #F7C773;
            display: flex;
            justify-content: space-between;
            align-items: center;

            .tab_th_box {
                width: 25%;
                height: 74rpx;
                font-size: 30rpx;
                font-family: Source Han Sans CN-Medium, Source Han Sans CN;
                font-weight: 500;
                color: #A26B2F;
                text-align: center;
                line-height: 74rpx;
            }
        }

        .neirong_big_box {
            width: 100%;
            height: 500rpx;

            .neirong_box {
                width: 100%;
                height: 100rpx;
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin-bottom: 8rpx;

                .tab_paiming_box {
                    width: 25%;
                    height: 100%;
                    font-size: 36rpx;
                    font-family: YouSheBiaoTiHei-Bold, YouSheBiaoTiHei;
                    font-weight: 400;
                    color: #A26B2F;
                    line-height: 100rpx;
                    text-align: center;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                }

                .tab_yh_box,
                .tab_jf_box {
                    width: 25%;
                    height: 100%;
                    font-size: 24rpx;
                    font-family: Source Han Sans CN-Bold, Source Han Sans CN;
                    font-weight: 700;
                    color: #A26B2F;
                    text-align: center;
                    line-height: 100rpx;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;

                }

                .tab_jl_box {
                    width: 25%;
                    height: 100%;
                    position: relative;

                    .kongSty {
                        width: 62rpx;
                        height: 70%;
                        text-align: center;
                        line-height: 70rpx;
                        position: absolute;
                        left: 0;
                        top: 0;
                        right: 0;
                        bottom: 0;
                        margin: auto;
                        color: #A26B2F;
                    }

                    .pic_box {
                        width: 62rpx;
                        height: 70%;
                        position: absolute;
                        left: 0;
                        top: 0;
                        right: 0;
                        bottom: 0;
                        margin: auto;

                        image {
                            width: 100%;
                            height: 100%;
                        }
                    }
                }
            }
        }


        .open_box {
            width: 386rpx;
            height: 70rpx;
            background: #FF9E00;
            box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(0, 0, 0, 0.15);
            border-radius: 12rpx 12rpx 12rpx 12rpx;
            opacity: 1;
            font-size: 28rpx;
            font-family: Source Han Sans CN-Medium, Source Han Sans CN;
            font-weight: 500;
            color: #FFFFFF;
            line-height: 70rpx;
            left: 0;
            right: 0;
            margin: auto;
            text-align: center;
            position: absolute;
            bottom: 34rpx;


        }
    }

    .xq_box {
        width: 464rpx;
        height: 528rpx;
        // background: rgba(0, 0, 0, 0.77);
        border-radius: 30rpx 30rpx 30rpx 30rpx;
        opacity: 1;
        border: 2rpx solid #FED187;

        .title_box {
            width: 100%;
            height: 98rpx;
            text-align: center;
            line-height: 98rpx;
            font-size: 36rpx;
            font-family: YouSheBiaoTiHei-Bold, YouSheBiaoTiHei;
            font-weight: 400;
            color: #FED187;
        }

        .pic_box {
            width: 206rpx;
            height: 242rpx;
            margin: auto;
            margin-bottom: 46rpx;

            image {
                width: 100%;
                height: 100%;
            }
        }

        .tc_name_box {
            width: 368rpx;
            height: 46rpx;
            font-size: 32rpx;
            font-family: Source Han Sans CN-Medium, Source Han Sans CN;
            font-weight: 500;
            color: #FED187;
            line-height: 46rpx;
            margin: auto;
            text-align: center;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;

        }

        .tc_pic_box {
            width: 368rpx;
            height: 40rpx;
            font-size: 28rpx;
            font-family: Source Han Sans CN-Medium, Source Han Sans CN;
            font-weight: 500;
            color: #FED187;
            line-height: 40rpx;
            margin: auto;
            text-align: center;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

    }

    /deep/.u-mode-center-box {
        background-color: rgba(0, 0, 0, 0.77) !important;
    }
}
</style>